<template>
    <div class="jcButton" @click='click' @mouseleave='itemMouseleave()' @mouseenter='itemMouseenter()' style="cursor:pointer">
        <div :class="isEnter?'enter':'leave'"
        :style="{
            color: isEnter?cursorColor:color
        }"
        >{{title}}</div>
    </div>
</template>
<script>

export default{
    props:{
        title: {
            type: [String, Number],
            default: '按钮'
        },
        color: {
            type: String,
            default: '#007aff'
        },
        cursorColor: {
            type: String,
            default: '#2697fe'
        },
        fontSize: {
            type: String,
            default: '30px'
        }
    },
    data(){
        return{
            isEnter: false
        }
    },
    methods:{
        click(){
            this.$emit('click')
        },
        itemMouseenter(){
            // console.log('进入')
            this.isEnter = true
            // document.getElementById('title').style.color = '#007aff'
        },
        itemMouseleave(){
            // console.log('离开')
            this.isEnter = false
            // document.getElementById('title').style.color = '#cccccc'
        },
    },
}
</script>
<style scoped lang='scss'>
    .jcButton{
        display: inline-block;
        padding: 2px 10px;
    }
    .enter{
        color: #007aff
    }
    .leave{
        color: #666666
    }
</style>
